import { defineComponent, reactive, toRefs, computed, watch, h } from "vue"
import VeDropdown from "amtf/components/dropdown"
import VeIcon from "amtf/components/icon"
import { ICON_NAMES } from "amtf/constants"

import { use样式 } from "amtf/hooks"
import { isEmptyValue, getValByUnit, 拼组件名, isFunction, isBoolean, getRandomId } from "amtf/utils"
const 主名 = "table-header-filter-content"
const 组件名 = 拼组件名(主名)

export default defineComponent({
    name: 组件名,
    props: {
        column: {
            type: Object,
            required: true,
        },
    },
    setup(props) {
        const { 拼样式名_table直属 } = use样式(主名)

        const state = reactive({
            filterList: [],
        })

        watch(
            () => props.column,
            newColumn => {
                if (newColumn.filter && Array.isArray(newColumn.filter.filterList)) {
                    state.filterList = newColumn.filter.filterList
                }
            },
            { immediate: true, deep: true }
        )

        const filterConfirm = () => {
            // console.log(`监听到事件 filterConfirm ing👇`)
            const { filterConfirm } = props.column.filter
            filterConfirm && filterConfirm(state.filterList)
        }

        const filterReset = () => {
            // console.log(`监听到事件 filterReset ing👇`)
            const { filterReset } = props.column.filter
            filterReset && filterReset(state.filterList)
        }

        const getIcon = h => {
            let result
            const { filterIcon } = props.column.filter
            if (isFunction(filterIcon)) {
                result = filterIcon(h)
            } else {
                result = <VeIcon name={ICON_NAMES.FILTER} />
            }
            return result
        }

        return () => {
            const { filterList, isMultiple, maxHeight, beforeVisibleChange } = props.column.filter || {}

            const compProps = {
                modelValue: filterList,
                showOperation: true,
                isMultiple: isMultiple,
                showRadio: true, // when single selection
                confirmFilterText: "确认",
                resetFilterText: "复原",
                beforeVisibleChange: beforeVisibleChange,
                onFilterConfirm: filterConfirm,
                onFilterReset: filterReset,
                onInput: val => {
                    state.filterList = val
                },
            }

            // console.log(`maxHeight 👉`, maxHeight)
            if (typeof maxHeight === "number") {
                compProps.maxHeight = maxHeight
            }

            return (
                <VeDropdown {...compProps}>
                    {/* icon */}
                    <span class={拼样式名_table直属("filter")}>
                        <span class={拼样式名_table直属("filter-icon")}>{getIcon(h)}</span>
                    </span>
                </VeDropdown>
            )
        }
    },
})
